<template>
  <div>
    <el-card class="card">
      <div class="main">
        <el-form ref="form" :model="form" label-width="80px">
          <el-row :gutter="10">
            <el-col :span="6">
              <el-form-item label="昵称">
                <el-input
                  v-model="form.nickName"
                  placeholder="昵称模糊搜索"
                ></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="用户名">
                <el-input
                  placeholder="用户名模糊搜索"
                  v-model="form.username"
                ></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-row :gutter="10" class="btns">
          <el-col :span="6">
            <el-button @click="regist">重置</el-button>
            <el-button type="primary" @click="search">查询</el-button>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card class="card">
      <div slot="header">
        <el-button type="primary">新增</el-button>
      </div>
      <div>
   <el-table :data="userList" border stripe>
          <el-table-column label="#" type="index" width="50" fixed />
          <el-table-column label="用户名" prop="username" width="200" fixed />
          <el-table-column label="昵称" prop="nick_name" width="200" />
          <el-table-column label="头像" width="200">
            <template slot-scope="scope">
              <img class="pic" :src="scope.row.salt" alt="">
            </template>
          </el-table-column>
          <el-table-column label="角色" prop="roles" />
          <el-table-column label="添加时间" prop="create_time" width="200" />
          <el-table-column label="操作" width="300">
            <template slot-scope="scope">
              <el-button
                type="success"
                size="mini"
                @click="goEdit(scope.row.id)"
              >编辑</el-button>
              <el-button
                type="danger"
                size="mini"
                @click="doDel(scope.row.id)"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>
     <el-pagination
        :current-page="page.currentPage"
        :page-sizes="page.pageSizes"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
  </div>
</template>

<script>
import { findUsersByPage } from "@/api/auth";
import mixin from "@/minx/index";

export default {
  props: {},
  mixins: [mixin],
  data() {
    return {
      form: {
        nickName: "",
        username: "",
      },
      userList: [],
    };
  },
  computed: {},
  created() {
    this.init();
  },
  mounted() {},
  watch: {},
  methods: {
    async init() {
       var forms={}
       for( var key in this.form){
         if(this.form[key]){
           forms[key]=this.form[key]
         }
       }
      var res = (
        await findUsersByPage(this.page.currentPage, this.page.size)
      ).data;

      this.userList = res.rows;
      this.page.total = res.total;
      // console.log(this.userList);
      //  console.log(forms)
    },
    search() {

      this.init();
      // console.log(this.userList);
    },
    regist(){
      this.form={}
      this.init()
    },
    handleSizeChange(val) {
            this.page.size = val
            this.page.currentPage = 1
            this.init()
        },
        handleCurrentChange(val) {
            this.page.currentPage = val
            this.init()
        },
  },
  components: {},
};
</script>

<style lang="scss" scoped>
.main {
  margin-top: 30px;
}
.btns {
  display: flex;
  justify-content: flex-end;
}
.pic{
  width: 100px;
  height: 100px;
}
</style>
